<template>
    <div>
        <div class="container">
            <div v-for="x of list" class="item">
                <div class="label">{{ x.title }}</div>
                <div class="value">{{ x.value }}</div>
            </div>
        </div>
        <a-button style="margin-top: 40px" @click="handleEdit">修改个人信息</a-button>
    </div>

    <a-drawer v-model:visible="visible" title="修改个人信息">
        <a-form :model="info" @finish="handleSubmit" v-bind="formProps">
            <a-form-item label="用户名" name="userName">
                <a-input v-model:value="info.userName" placeholder="请输用户名" disabled></a-input>
            </a-form-item>
            <a-form-item label="性别" name="sex">
                <a-select v-model:value="info.sex"
                          placeholder="请选择性别">
                    <a-select-option key="1">男</a-select-option>
                    <a-select-option key="0">女</a-select-option>
                    <a-select-option key="2">外星人</a-select-option>
                    <a-select-option key="3">其他</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="身高" name="height">
                <a-input v-model:value="info.height" placeholder="请输入身高" suffix="cm"></a-input>
            </a-form-item>
            <a-form-item label="体重" name="weight">
                <a-input v-model:value="info.weight" placeholder="请输入体重" suffix="kg"></a-input>
            </a-form-item>
            <a-form-item label="电话号码" name="phone">
                <a-input v-model:value="info.phone" placeholder="请输入电话号码"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" :loading="loading">保存</a-button>
            </a-form-item>
        </a-form>
    </a-drawer>
</template>

<script>
import {message} from "ant-design-vue";
import {update} from "../service.js";

export default {
    name: "My",
    data() {
        return {
            visible: false,
            info: {},
            list: [],
            formProps: {
                colon: false,
                labelCol: {span: 5, offset: 0},
                autocomplete: "off",
                hideRequiredMark: true,
            },
            loading: false,
        }
    },
    mounted() {
        this.setList();
    },
    methods: {
        setList() {
            const info = JSON.parse(localStorage.getItem('userInfo'));
            this.info = info;
            this.list = [
                {title: '用户名', value: info.userName},
                {title: '性别', value: {0: '女', 1: '男', 2: '外星人', 3: '其他'}[info.sex]},
                {title: '身高', value: info.height + 'cm'},
                {title: '体重', value: info.weight + 'kg'},
                {title: '手机号码', value: info.phone},
            ];
        },
        handleEdit() {
            this.visible = true;
        },
        async handleSubmit() {
            this.loading = true;
            await update({
                userId: this.info.userId,
                sex: this.info.sex,
                height: this.info.height,
                weight: this.info.weight,
                phone: this.info.phone,
            });
            localStorage.setItem('userInfo', JSON.stringify(this.info));
            this.setList();
            message.success('修改成功');
            this.visible = false;
            this.loading = false;
        },
    }
}
</script>

<style scoped>
.item {
    display: flex;
}

.container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
}

.label {
    color: #999;
    margin-right: 8px;
    width: 60px;
}
</style>